<template>
	<div class="main">
		
		<el-card shadow="never" class="card">
			<div slot="header" class="clearfix">
				<span>条件查询</span>

			</div>
			<!-- 查询表单 -->
			<el-form ref="form" :model="form" label-width="80px" size="small" :inline='true'>
				<el-form-item label="作者">
					<el-input v-model="form.author"></el-input>
				</el-form-item>
				<el-form-item label="标题">
					<el-input v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="编辑类型">
					<el-select v-model="form.editorType" placeholder="编辑类型">
						<el-option label="富文本" :value="0"></el-option>
						<el-option label="MarkDown" :value="1"></el-option>
					</el-select>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
					<el-button type="primary" @click="empty">重置</el-button>

				</el-form-item>
			</el-form>
		</el-card>

	
	
	
	
		<!-- 表单内容区 -->

		<el-card shadow="never" class="content-card">
			<div slot="header" class="clearfix">
				<el-button type="primary" size="small" @click="add">新增</el-button>
				
			</div>

			<el-table :data="tableData" border style="width: 100%" v-loading="loading">
				<el-table-column fixed type="index" align="center" width="150">
				</el-table-column>
				<el-table-column prop="title" label="文章标题" align="center" width="150">
				</el-table-column>

				<el-table-column label="文章图片" width="120">
					<template slot-scope="scope">
						<img :src="scope.row.coverImg" alt="" style="width: 80px; height: 80px;">
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" width="180">
					<template slot-scope="scope">
						<div>{{scope.row.modifyTime}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="author" label="文章作者" align="center" width="150">
				</el-table-column>
				<!-- 滑动开关 -->
				<el-table-column label="文章状态" width="100">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.isShow" align="center" @change="changeShow(scope.row)"
							:active-value="1" :inactive-value="0">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="goEdit(scope.row.id)" type="text" size="small">编辑</el-button>
						<el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div>


		</el-card>

	</div>

</template>

<script>
	import {
		findArticles,
		del,
		addArticle,
		productArticle,
		updateArticle,
		changeShowStatus
	} from "@/api/content/article.js"
	export default {
		data() {
			return {
				form: {
					author: "",
					title: "",
					editorType: ""
				},
				tableData: [],
				searchForm: {},
				loading: false,
				dialogVisible: false,
				// 分页对象
				page: {
					currentpage: 1,
					pageSizes: [10, 15, 20, 25],
					pageSize: 10,
					total: 0
				}
			}
		},
		created() {
			this.getFindArticles()
		},
		methods: {
			// 点击新增文章
			add(){
				this.$router.push({path:'/content/detail'})
			},

			//删除文章
			remove(val) {

				this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(val.id).then(res => {
						if (res.success) {
							this.$message.success("删除成功")
							this.getFindArticles()
						} else {
							this.$message.error("删除失败")
						}

					})


				})

			},
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getFindArticles()
			},
			handleCurrentChange(val) {
				this.page.currentpage = val
				this.getFindArticles()
			},
			// 滑动开关
			changeShow(val) {
				// 添加一个暂存状态
				var temp = val.isShow === 1 ? 0 : 1
				changeShowStatus({
					id: val.id,
					isShow: val.isShow
				}).then(res => {
					if (res.success) {
						this.$message.success("状态修改成功")
					} else {
						val.isShow = temp
						this.$message.error("状态修改失败,请检查接口")
					}

				})
			},
			//获取文章列表
			getFindArticles() {
				this.loading = true
				findArticles(this.page.currentpage, this.page.pageSize, this.searchForm).then(res => {
					console.log(res)
					if (res.success == true) {
						this.tableData = res.data.rows
						this.page.total = res.data.total
					} else {
						this.$message.error("获取列表失败")
					}
					this.loading = false
				})
			},
			// 点击查询
			search() {
				// console.log(this.form)
				this.getFindArticles()
				// 分页初始化
				this.page = this.$options.data().page
				// 遍历表单把需要查询的数据放到searchForm里
				for (const key in this.form) {


					this.searchForm[key] = this.form[key]

				}
			},
			// 重置
			empty() {
				this.form = this.$options.data().form
			},
			// 编辑文章
			goEdit(id) {
				this.$router.push({name:"EDDetail",params:{id}})
			}
		},

	}
</script>

<style scoped lang="scss">
	.card {
		margin: 30px;
	}
</style>
